<template>
	<view class="localtion">
		<picker class="pickerDate" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="uni-input time-select">
				{{date}}
				<image src="/static/icon/arrow-right.png" style="width: 16px; height: 16px;"></image>
			</view>
		</picker>
							
		<view v-if="showPage">
			<map
			  :id="Math.ceil(Math.random() * 1000)"   
			  :longitude="calculateCenter(markers).longitude || 114.305214"   
			  :latitude="calculateCenter(markers).latitude || 30.592934" 
			  :scale="scale"   
			  show-location   
			  :markers="markers"  
			   style="width: 100%; height: 100vh;">  
			</map>  
		</view>
		<view v-else>
			<view></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, onMounted, ref } from 'vue'
	import { homeServer } from "@/common/index";
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import gcoord from '@/utils/gcoord.global.prod.js';
	import {onShow} from "@dcloudio/uni-app"
	// import BaseMap from '@/components/baseMap/index.vue'
	const studentStore = useStudentListStore();
	const curStd = computed(() => studentStore.currentStudent);
	const showPage = ref(false)
	const map = ref(null);
	const location = ref({
		lote:114.305214,
		late:30.592934
	});
	// const location = ref({});
	const markers = ref([])
	const scale = ref(15);
	
	const recordDateTime = () => {
		const d = new Date();
		return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
	}

	function calculateCenter(markers) {  
	  let sumLat = 0, sumLon = 0;  
	  markers.forEach(marker => {  
	    sumLat += marker.latitude;  
	    sumLon += marker.longitude;  
	  });  
	  const centerLat = sumLat / markers.length;  
	  const centerLon = sumLon / markers.length;  
	  return { latitude: centerLat, longitude: centerLon };  
	} 
	
	
	const date = ref(recordDateTime())
	const startDate = ref();
	const endDate = ref();
	const bindDateChange = ({detail}) => {
		date.value = detail.value;
		findGatherRecords();
	}
	
	
	// 轨迹查询
	const findGatherRecords = async () => {
		const studentId = curStd.value?.id;
		if(!studentId){
			console.log('没有学生id')
			return;
		}
		try{
			const {status, data} = await homeServer.findGatherRecords({studentId});
			if(status === '200'){
				if(Array.isArray(data) && data.length === 0){
					uni.showToast({
						title:"暂无轨迹",
						icon:"none"
					});
					markers.value = [];
					showPage.value = true;
					return;
				}
				
				const transformLatLon = (longitude, latitude) => {
					const baiduCoord = [longitude, latitude];
					  // 使用 gcoord 将百度坐标转化为腾讯地图坐标
					const tencentCoord = gcoord.transform(
						baiduCoord,
						gcoord.BD09,  // 百度坐标系
						gcoord.GCJ02  // 腾讯地图使用的是国测局坐标系 (GCJ02)
					);
					return tencentCoord;
				}
				
				const markes = data.map((item, i) => {
					const [longitude, latitude] = transformLatLon(item.longitude, item.latitude)
					const  m = {
						id:Number(item.timeStamp),
						latitude,  
						longitude,  
						width: 50,  
						height: 50,  
						iconPath: '/static/images/tabbar/postion.png', // 自定义图标路径  
						callout: {
							content: `${i + 1}`,
							color: "#000000",
							bgColor: "#ffffff",
							borderRadius: 1,
							display: "ALWAYS",
							padding: 5,
							textAlign: "center",
						}
					}
					return m;
				})
				markers.value = markes;
				showPage.value = true;
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	

	onMounted(() => {
		// 创建map对象
		if(map.value === null){
			map.value = uni.createMapContext('map');
		}
	})
	
	onShow(() => {
		if(map.value === null){
			map.value = uni.createMapContext('map');
		}
		findGatherRecords();
	})
	
	
	
	
</script>

<style lang="scss" scoped>
	
	.localtion{
		.get-children-localtion{
			position: fixed;
			z-index: 101;
			right: 50upx;
			bottom: 450upx;
			height: 100upx;
			width: 100upx;
			padding: 10upx;
			background-color: #2BC888;
			border-radius: 50%;
			color: #fff;
			font-size: 25upx;
			text-align: center;
			display: flex;
			align-items: center;
		}
		
		.footer{
			position: fixed;
			z-index: 100;
			left: 20upx;
			right: 20upx;
			bottom: 20upx;
			height: 300upx;
			background-color: #fff;
			border-radius: 10px;
			padding: 40upx 20upx;
			.header{
				.title{
					font-size: 32upx;
					color: #000;
					margin-bottom: 20upx;
				}
				.des-btn{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.des{
						font-size: 22upx;
						color: #636363;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						.gps-tips{
							margin-bottom: 10upx;
						}
						.time{}
					}
					.btn{
						width: 200upx;
						height: 50upx;
						line-height: 50upx;
						text-align: center;
						border: 1px solid #2BC888;
						font-size: 30upx;
						color: #2BC888;
						border-radius: 15upx;
					}
				}
			}
			.btn-list{
				display: flex;
				justify-content: space-around;
				margin-top: 80upx;
				.base-btn{
					width: 200upx;
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					color: #3a3838;
					border-radius: 10upx;
					text-align: center;
					border: 1px solid #2BC888;
				}
				.safe-site{
				
				}
				.active-trajectory{
					
				}
			}
		}
		
		.pickerDate{
			display: none;
			position: fixed;
			top: 20upx;
			left: 20upx;
			z-index: 1000;
		}
		.time-select{
			color: #fff;
			background-color: #2BC888;
			padding:0 20upx;
			height: 50upx;
			line-height: 50upx;
			border-radius: 25upx;
			display: flex;
			align-items: center;
		}
	}
</style>


